import { Toast } from "antd-mobile";
import React, { useState } from "react";
import Header from "../../components/Header/Header";
import { reqregister } from "../../http/api";

const Register = (props) =>{
  const [user,setUser] = useState({
    phone:"",
    nickname:"",
    password:"",
  });

  const doRegister = () =>{
    reqregister(user).then((res) =>{
      if(res.data.code === 200){
        Toast.show({
          content:res.data.msg,
        });
        props.history.push("/login");
      }
    });
  }

  return (
    <div>
      <Header back title="注册"></Header>
      {/* 2.数据绑定 */}
      <div>user:{JSON.stringify(user)}</div>
      <div>
        手机号：
        <input
          type="text"
          value={user.phone}
          onChange={(e) => setUser({ ...user, phone: e.target.value })}
        />
      </div>
      <div>
        昵称：
        <input
          type="text"
          value={user.nickname}
          onChange={(e) => setUser({ ...user, nickname: e.target.value })}
        />
      </div>
      <div>
        密码：
        <input
          type="text"
          value={user.password}
          onChange={(e) => setUser({ ...user, password: e.target.value })}
        />
      </div>
      <button onClick={() => doRegister()}>注册</button>
    </div>
  )
}

export default Register